<template>
  <!-- 动态按钮部分 -->
  <div class="action-buttons">
    <el-button
      v-for="btn in buttons"
      :key="btn.type"
      :type="btn.btnType || 'default'"
      :disabled="btn.disabled || false"
      @click="handleBtnClick(btn.type)"
    >
      {{ btn.label }}
    </el-button>
  </div>
</template>

<script setup>

const props = defineProps({
  hasSelection: Boolean,
  buttons: {
    type: Array,
    default: () => [
      { type: 'add', label: '新增', btnType: 'primary' },
      { type: 'edit', label: '修改' },
      { type: 'view', label: '查看' },
      { type: 'all', label: '全部客户' },
      { type: 'unpaid', label: '未清客户' },
      { type: 'export', label: '导出' },
      { type: 'reset', label: '重置' }
    ]
  }
})


// 模拟后端返回的按钮参数
const mockBtnParam = {
  an_faid: 0,
  biaoti: '首页',
  ctype: 'shouye',
  jiaoyan: false,
  jk_type: '',
  jk_zdm: '',
  pinglunlx: 0,
  querents: '',
  tubiao: '1.png',
  url: '',
  wc_fanhui: 0
}

const emit = defineEmits(['add', 'edit', 'view', 'all', 'unpaid', 'export', 'reset'])
function handleBtnClick(type) {
  console.log(`[按钮点击] type=${type}`, mockBtnParam)
  emit(type)
}
</script>

<style scoped>
.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 16px 0;
}
.el-button {
  min-width: 80px;
}
</style>
